rn中加载android原生页面 android rn开发

同时你可以参考这边文章实现标题这个目的，这里 楼主的方案也是参考这边文章得来的，非常感谢作者。只是楼主并没有直接在RN项目中打包aar，而是将RN先更改为android项目目录结构再打包成aar包。并且楼主的项目是原生部分和RN部分都有业务模块并存的。

当前楼主项目中使用的是react native 0.66.3 仍是支持jdk8

具体字段参考"前端纸飞机"这位大神的csdn文章：

所以需要将rn项目结构改变为安卓项目结构，如果你是想将原有安卓项目集成到rn项目中去，直接将原有项目放入android目录中即可。

以下是将RactNative项目更改为android项目后的目录结构：

实际开发过程中，我建议在RN项目中也使用app （library） 和 aarlibrary，主要代码均放在aarlibrary中，app （library）仅作为一个入口。这样方便将RN项目中的aarlibrary复制到

用于打包的android项目中（图中的rnto_android_demo）。

RN项目结构如下图：

###（1）在aarLibrary对应位置创建assets文件夹

改文件用于存放打包的.bundle文件

###（2）将RN工程中的代码打包成bundle包

cd到RN项目根目录，执行 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/aarLibrary/src/main/assets/index.android.bundle --assets-dest android/aarLibrary/src/main/res 命令将RN项目打包成bundle包。执行完该命令后，assets文件下会生成一个.bundle文件，res资源文件下会生成多个drawable不同规格文件夹。

（另外新建一个安卓项目将RN项目中对应的文件复制过来，并非直接更改原RN项目，开发还是得在RN项目中进行开发）

首先我们看下创建RN项目后，默认在app下build.gradle生成的注释（很重要，很重要，很重要）

然后我们分别对比RN项目中和android原生项目中根目录下的build.gradle和aarlibrary下的build.gradle文件。

1：首先对比根目录下的build.gradle文件。

2：对比aarlibrary下的build.gradle文件

这里注意先设置project.ext.react = []，再设置react.gradle的引用。

在继续引用native_modules.gradle。命令创建RN项目时这两个gradle的引用也是自动创建的。

下面是安卓原生项目中aarlibrary的设置：

3：对比RN项目android文件夹下的setting.gradle 和android原生项目中的setting.gradle

总结：将RN项目修改为android项目结构，需要更改android项目更目录下的setting.gradle和build.gradle,还有aarlibrary下的build.gradle相关内容的引用路径，一共三处。

已经把RN项目结构改为了android项目结构，将aarlibrary打成aar包还不是手到擒来。但是！，也得把android项目（rnto_android_demo）运行起来。下面是运行rnto_android_demo时遇到的问题。

之前已经将RN项目的package.json文件拷贝到了rnto_android_demo项目的根目录下，在rnto_android_demo根目录下执行npm install 命令生成node_modules文件夹。然后运行项目，不出意外你可能遇到如下问题（我们是将RN开发完成再打包aar包的，建议创建完RN项目的时候便尝试打包aar，RN项目每添加一个需要引用android或ios原生库的三方库时，再打包aar,这样可以清晰的发现各种问题）。

问题一：

这个问题是由于我们修改了package.json路径，但是在native_modules.gradle路径是有问题的，既然错误信息已经告诉我们了错误位置那我们就去看看node_modules中@react-native-community这个库的native_modules.gradle的237行出了什么问题。

原因已经找到，那我们手动删除android这一层级目录即可，同时在该gradle内搜索还有没有相同的目录，也一并将android这一层级目录删除。（这里有个问题，每次删除node_modules文件夹都需要重复操作这样的问题，哪位朋友有更好的方案解决这个问题，不一样的配置或者写个脚本？欢迎讨论）。

除了上面一处237行，还需要删除2行[‘android’]：

接下来我们再次运行rnto_android_demo这个项目。到这里楼主已经成功的把项目运行起来了，

至此，RN项目已经可以再不更改原有项目结构的情况被集成了，但是原有项目就需要每次更新package.json中的依赖，还多出一个node_moduls文件夹，这肯定不是我们想要的集成形式。

这时我们只需要将aarlibrary这library打成aar，并且脱离node_modules依赖，就能达到我们的目的了。

不过和之前的项目作对比，发现Android目录结构下的第三方依赖均未显示出来，aarlibrary.gradle和setting.gradle依赖的路径中的文件的路径还是有问题，我直接列出来路径截图

apply from: “…/node_modules/react-native/react.gradle”

将这里路径更改过来后，便可以成功运行了。

这一步，其实网上已经有很多文章张介绍怎么做了，下面是我参考的一位大神的文章，非常详细的讲述了怎么将RN项目打包成一个SDK。

###(1)将RN项目的核心依赖包拿出来

在node_module文件下的aar 包和.pom文件复制出来

###(1)将react-native-0.66.3.pom中的依赖拿出来

以上依赖我们可以在rnto_android_demo的android模式下看到

将以上的依赖均打包成aar包，

以下这些依赖在aarlibrary打aar包时都会被包含

最后集成App需要集成如下项目：

至此，已经将所有RN项目部分代码打包成aar，看起来很冗余，所以大家可以尝试再把这些aar都让在一个library中,最终只提供一个aar包，由于楼主项目有多个RN-SDK的集成，所有打包19个aar放在主APP，其余大部分aar可以和其他项目复用。

我们并非是将RN项目整个打包成aar，而是将RN连同原生部分一起打包，所以以前是怎么给原生写调用代码的，这里也怎么写调用代码。不过对比其他集成形式，我这里已经在aarlibrary中集成过index.android.bundle包了。

严格来说，我们是将RN与原生混合开发的library打包成SDK。